<template>
  <el-card class="box-card">
    <el-form
      ref="searchFormRef"
      :model="searchForm"
      inline
    >
      <el-form-item>
        <el-select
          v-model="searchForm.sport"
          placeholder="比赛项目"
        >
          <el-option
            v-for="it in xiangmuShuzu"
            :key="it._id"
            :label="it.name"
            :value="it._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          @click="searchByXM()"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="sportItemList"
      border
    >
      <el-table-column
        align="center"
        prop="sport.name"
        label="比赛项目"
      />
      <el-table-column
        align="center"
        prop="student.stuName"
        label="参赛学生"
      />
      <el-table-column
        align="center"
        prop="student.sex"
        label="性别"
      />
      <el-table-column
        align="center"
        prop="student.parent.className"
        label="班级"
      />
      <el-table-column
        align="center"
        prop="sport.time"
        label="比赛时间"
      />
      <el-table-column
        align="center"
        label="操作"
        width="250px"
      >
        <template slot-scope="scope">
          <el-button
            @click="$router.push(`/apply/create/${scope.row._id}`)"
            type="info"
            size="medium"
          >
            编辑
          </el-button>
          <el-button
            @click="remove(scope.row)"
            type="danger"
            size="medium"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      xiangmuShuzu: [],

      searchForm: {
        sport: "",
      },
      sportItemList: []
    };
  },
  created() {
    this.fetch();
    this.getXiangmu();

  },
  methods: {
        async getXiangmu() {
      const rs = await this.$http.get("rest/sport_items");
      if (rs.status !== 200) return;
      this.xiangmuShuzu = rs.data;
      console.log("项目");
      console.log(rs.data);
    },
        async searchByXM() {
      const rs = await this.$http.post("sportManage/search", this.searchForm);
      if (rs.status !== 200) return;
      // this.xiangmuShuzu = rs.data;
      console.log("比赛查询");
      console.log(rs.data);
      this.sportItemList = rs.data;
    },
    remove(row) {
      this.$confirm(`是否删除分类 "${row.name}"`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const rs = await this.$http.delete(`rest/applies/${row._id}`);
        rs;
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.fetch();
      });
    },
    async fetch() {
      const rs = await this.$http.get("rest/applies");
      this.sportItemList = rs.data;
      console.log('报名列表');
      console.log(rs.data);  
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
